<template>
	<el-container>
		<el-main class='x-main-edit'>
			<el-form ref="form" :rules="form_rules" :model="form" size="mini" label-width="15%">
				<el-tabs type="border-card" v-model="page_tag">
					<!---->
					<!---->
					<el-tab-pane :label="page_info.title" name="1">
						<el-form-item label="类型" prop="spu_type" ref="spu_type">
							<el-radio-group :disabled="page_info.is_admin_edit" v-model="form.spu_type">
								<el-radio v-for="(item,index) in page_info.spu_types" :key="index" :label="index">
									{{item}}
								</el-radio>
							</el-radio-group>
						</el-form-item>
						<el-form-item label="促销商品" prop="spu_promotion">
							<el-switch v-model="form.spu_promotion"
									   active-color="#13ce66"
									   :active-value="1" active-text="开始"
									   :inactive-value="0" inactive-text="关闭">
							</el-switch>
							<div class="x-alert">
								<span>开启：会显示倒计时</span>
							</div>
						</el-form-item>
						<el-form-item label="名称" prop="spu_name" ref="spu_name">
							<el-input class="x-input-60" v-model="form.spu_name"></el-input>
						</el-form-item>
						<el-form-item label="副标题" prop="spu_title_sub" ref="spu_title_sub">
							<el-input class="x-input-60" v-model="form.spu_title_sub"></el-input>
							<div class="x-alert">
								<span>多个英文逗号分隔</span>
							</div>
						</el-form-item>
						<el-form-item label="分组" prop="spu_id_src">
							<el-select v-model="form.spu_id_src" placeholder="请选择">
								<!--								<el-option label="未设置" key="" value=""></el-option>-->
								<el-option v-for="(item,index) in page_info.list_group"
										   :label="item.abc_name" :key="item.abc_id+''" :value="item.abc_id+''">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="原价" prop="spu_price_original" ref="spu_price_original">
							<el-input-number v-model="form.spu_price_original" :min="0.01" :step="0.01" :precision="2"></el-input-number>
							元
						</el-form-item>
						<el-form-item v-if="form.spu_type==0" label="支付价" prop="spu_price" ref="spu_price">
							<el-input-number v-model="form.spu_price" :min="0.01" :step="0.01" :precision="2"></el-input-number>
							元
						</el-form-item>
						<el-form-item v-if="form.spu_type==1" label="支付价" prop="spu_price" ref="spu_price">
							<el-input-number v-model="form.spu_price" :min="1" :step="1"></el-input-number>
							{{ page_info.fun_name }}
						</el-form-item>
						<el-form-item label="用户兑换上限" prop="spu_user_buy_max" ref="spu_user_buy_max">
							<el-input-number v-model="form.spu_user_buy_max" :min="0" :step="1"></el-input-number>
							<div class="x-alert">
								<span>每位用户可购买上限</span><br/>
							</div>
						</el-form-item>
						<el-form-item label="总量">
							{{ form.__stock_count_total }}
						</el-form-item>
						<el-form-item label="余量" prop="stock_count_left">
							<span v-show="!set_stock">{{ form.__stock_count_left }}</span>
							<el-input-number v-show="set_stock" v-model="form.__stock_count_left" :min="0" @change="funcSetStock"></el-input-number>
							<el-button v-if="!set_stock" size="mini" type="text" @click="set_stock=true">设置</el-button>
						</el-form-item>
						<el-form-item label="有效期" prop="spu_vaild_date_end">
							<el-date-picker
								style="width: 200px;"
								v-model="form.spu_valid_date_begin"
								type="datetime"
								placeholder="选择开始时间"
								:picker-options="g_cc.picker_options"
								default-time="00:00:00"
								value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
							至
							<el-date-picker
								style="width: 200px;"
								v-model="form.spu_valid_date_end"
								type="datetime"
								placeholder="选择结束时间"
								default-time="23:59:59"
								:picker-options="{
									disabledDate(time) {
										return g_cc.picker_disabled_date_func(time,form.spu_valid_date_begin);
									},
								}"
								value-format="yyyy-MM-dd HH:mm:ss">
							</el-date-picker>
						</el-form-item>
						<el-form-item label="轮播图" prop="sputxt_imgs">
							<x-upload-imgs ref="uploadEle" :sortable="true" :max-num="6"
										   :rules="({ maxSize: 0.5})"
										   :img_root="page_info.static_file_root"
										   v-bind:value.sync="form.sputxt_imgs"
										   :remote-fuc="g_page.funcUpdateImg"
										   :before-upload="g_page.funcUpdateImgBefore"/>
						</el-form-item>
						<el-form-item label="规格说明" prop="spec" ref="spec">
							<el-input type="textarea" :rows="5" class="x-input-60" v-model="form.spec"></el-input>
						</el-form-item>
						<el-form-item label="详情" prop="content">
							<Tinymce menubar="" v-model="form.content" :height="500" ref="content"></Tinymce>
						</el-form-item>
						<el-form-item label="运费模板" prop="spu_freight_id" ref="spu_freight_id">
							<el-select filterable v-model="form.spu_freight_id" placeholder="请选择">
								<el-option label="免运费" key="" value=""></el-option>
								<el-option v-for="(v, k) in page_info.list_freight"
										   :label="v.mfit_name"
										   :key="v.mfit_id"
										   :value="v.mfit_id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="状态" prop="spu_valid">
							<el-switch v-model="form.spu_valid"
									   active-color="#13ce66"
									   :active-value="1" active-text="上架"
									   :inactive-value="0" inactive-text="下架">
							</el-switch>
						</el-form-item>
						<el-form-item label="排序" prop="spu_order" ref="spu_order">
							<el-input-number v-model="form.spu_order" :step="1"></el-input-number>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
					<el-tab-pane v-if="false" label="模板" name="2">
						<el-form-item label="应用模板" prop="reply_app_file" ref="reply_app_file">
							<el-col :span="6">
								<el-input v-model="form.reply_app_file" placeholder="默认：t_001"/>
							</el-col>
						</el-form-item>
					</el-tab-pane>
					<!---->
					<!---->
				</el-tabs>
			</el-form>
			<!---->
			<!---->
			<!-- 编辑控件 -->
			<!--			<PrizeSetList ref="item_edit" :id_src="form.fprize_uix" :pset_key="form.fprize_uix" app_id="fun_mall"></PrizeSetList>-->
			<!---->
			<!---->
			<!-- 按钮部分 -->
			<div class="save_wrap">
				<el-button @click="g_page.funcBack" size="mini">返回</el-button>
				<el-button type="success" @click="g_page.funcSave" size="mini">保存</el-button>
				<el-checkbox v-if="page_info.is_admin_edit" style="margin-left: 10px;" label="保存后停留" v-model="checked"/>
			</div>
			<!---->
			<!---->
			<!---->
		</el-main>
	</el-container>
</template>

<script>
	import Tinymce from '@/components/Tinymce'

	export default {
		components: {
			Tinymce
		},
		data() {
			let page_data = {
				set_stock: false
			}
			//
			page_data = this.g_cc.funcGetInitData(page_data)
			//
			return page_data
		},
		mounted() {
			console.log('mounted')
			console.log(this.$route.query)

			this.g_page.funcSetVue(this)
			//
			this.g_page.funcSetApiUrlEdit('/xadmin/mall/mall__spu__edit')
			this.g_page.funcSetApiUrlSave('/xadmin/mall/mall__spu__edit/save')
			let page = this
			//验证
			this.form_rules = {
				__test: [{
					required: true,
					message: '请输入原密码',
					trigger: 'blur'
				}]
			}

			let data = this.$route.query
			this.g_page.funcEdit(data)
		},
		methods: {
			funcShowDialogAfter() {
				console.log('funcShowDialogAfter')

				this.$nextTick(() => {
					setTimeout(() => {
						this.$refs['content'].setContent(this.form.content)
					}, 200)
				})
			},
			//保存之前
			funcSaveBefore(data) {
				console.log('funcSaveBefore', data)

				// data.abc_str_00 = this.g_page.funcImgArrToStr(data.abc_str_00_imgs)

				return data
			},
			//设置库存
			funcSetStock(e) {
				console.log('funcSetStock', e)
				this.form.stock_count_left = e
			}
		}
	}
</script>
